<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
  <div class="nes-box disabled-select-text">
    <div class="nes-pos">
      <div class="nes-pad" draggable="false"></div>
    </div>
    <div class="nes-screen-box">
      <canvas class="nes-screen"></canvas>
    </div>
    <div class="nes-attack">
      <div class="nes-attack-box">
        <div class="nes-button nes-button-full-screen" draggable="false">FullScreen</div>
      </div>
      <div class="nes-attack-box">
        <div class="nes-button nes-button-select" draggable="false">SELECT</div>
        <div class="nes-button nes-button-start" draggable="false">START</div>
      </div>
      <div class="nes-attack-box">
        <div class="nes-button nes-button-AB-repeating" draggable="false">A + B</div>
        <div class="nes-button nes-button-B-repeating" draggable="false">B</div>
        <div class="nes-button nes-button-A-repeating" draggable="false">A</div>
      </div>
      <div class="nes-attack-box">
        <div class="nes-button nes-button-AB" draggable="false">A + B</div>
        <div class="nes-button nes-button-B" draggable="false">B</div>
        <div class="nes-button nes-button-A" draggable="false">A</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import HelloWorld from "./components/HelloWorld.vue";
</script>

<style>
body {
  margin: 0;
}
#app {
  text-align: center;
}

html, body, #app {
  height: 100%;
}

.nes-box {
  display: flex;
  height: 100%;
  justify-content: space-evenly;
}

.nes-pos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nes-pad {
  width: 220px;
  height: 220px;
  border: none;
  color: #fff;
  text-align: center;
  line-height: 150px;
  background: url(/image/pad.png);
  background-size: 100%;
}

.nes-screen-box {
  flex: 1;
  width: 0;
  max-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nes-screen {
  max-width: 100%;
  max-height: 100%;
}

.nes-attack {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
}

.nes-attack-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nes-button {
  width: 65px;
  height: 65px;
  border: none;
  color: #fff;
  text-align: center;
  line-height: 65px;
  background: url(/image/button.png);
  background-size: 100%;
}


.disabled-select-text {
  -webkit-touch-callout: none;/*系统默认菜单被禁用*/
  -webkit-user-select: none;/*webkit浏览器*/
  -khtml-user-select: none;/*早起浏览器*/
  -moz-user-select: none;/*火狐浏览器*/
  -ms-user-select: none;/*IE浏览器*/
  user-select: none;/*用户是否能够选中文本*/
}

</style>
